:root{
    --main-color: #ff6c00;
    --shadow-color: rgba(0,0,0,.1);
}

.main .left-menu{
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.main .right-content{
    width: calc(100% - 250px);
    padding-left: .3rem;
    padding: .5rem;
}
.main .right-content .content-list{
    background: #ffffff;
    border-radius: .2rem;
    height: calc(100vh - 2rem);
    border: solid .3rem #fff;
}
.top-title{
    height: 1rem;
    padding-left: 250px;
}
.after:after{
    content: attr(data-after);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .2rem;
    width: 100%;
    height: 100%;
    opacity: .7;
}
.w1600{
    width: var(--autoWidth);
    max-width: 96%;
    margin: 0 auto;
}

.main iframe{
    height: 100%;
}

/* 以上为组件展示页面的css */

/* 组件公共 class */
.pr{position: relative;z-index: 5;}
.ab{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;}
.w100{width: 100%;}
.hidden,.hide {
	display: none;
}

.d-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.f-reverse{
	flex-direction: row-reverse;
}
.j-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.j-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.j-sb {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.j-start {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.f-wrap {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.f-colu {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.a-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.a-start {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.a-end {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.a-baseline {
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}
.t-center{text-align: center;}

/* 行高 */
.line-mn,
.line-mn * {
	line-height: 1.3;
}

.line-sm,
.line-sm * {
	line-height: 1.5;
}

.line-md,
.line-md * {
	line-height: 1.8;
}

.line-lg,
.line-lg * {
	line-height: 2;
}

/* 字体 */
.font-heavy {font-weight: 900;}
.font-bold {font-weight: 700;}
.font12 {font-size: 0.12rem;}
.font14 {font-size: 0.14rem;}
.font16 {font-size: .16rem;}
.font18 {font-size: .18rem;}
.font20 {font-size: .20rem;}
.font22 {font-size: .22rem;}
.font24 {font-size: .24rem;}
.font25 {font-size: .25rem;}
.font26 {font-size: .26rem;}
.font28 {font-size: .28rem;}
.font30 {font-size: .30rem;}
.font32 {font-size: .32rem;}
.font34 {font-size: .34rem;}
.font35 {font-size: .35rem;}
.font36 {font-size: .36rem;}
.font38 {font-size: .38rem;}
.font40 {font-size: .40rem;}
.font42 {font-size: .42rem;}
.font45 {font-size: .45rem;}
.font48 {font-size: .48rem;}
.font50 {font-size: .50rem;}
.font55 {font-size: .55rem;}
.font56 {font-size: .56rem;}
.font58 {font-size: .58rem;}
.font60 {font-size: .6rem;}
.font65 {font-size: .65rem;}
.font100 {font-size: 1rem;}

/* 图片移入放大 */
.scale-hover{overflow: hidden;}
@media(min-width: 1201px) {
    .scale-hover .image{
        transition: all .5s;
    }
    .scale-hover:hover .image{
        transform: scale(1.03);
    }
}
/* 组件公共 class end */



/* BLOG */

/* one */

.blog-content-01 .infomation{
    padding: .3rem;
}
.blog-content-01 .flex-list{
    margin: 0 -.15rem;
}
.blog-content-01 .single-item{
    width: 33.33%;
    padding: 0 .15rem;
}
.blog-content-01 .single-item:nth-of-type(3n) ~ .single-item{
    margin-top: .3rem;
}
.blog-content-01 .single-box{
    border: solid 1px #e5e7eb;
    border-radius: .1rem;
    overflow: hidden;
}
.blog-content-01 .single-box figure img{
    height: 3rem;
    object-fit: cover;
}
.blog-content-01 .single-box .infomation h2{
    font-size: .14rem;
    color: #9ca3af;
    margin-bottom: .1rem;
}
.blog-content-01 .single-box .infomation h3{
    font-size: .2rem;
}
.blog-content-01 .single-box .description{
    margin: .15rem 0 .2rem;
    opacity: .8;
}
.blog-content-01 .single-box .blog-01-more a{
    transition: all .5s ease;
    color: #0281cc;
    padding: .1rem .15rem;
    margin-left: -.15rem;
    border-radius: .05rem;
}
.blog-content-01 .single-box .blog-01-more img{
    width: .18rem;
    margin-left: .1rem;
}
.blog-content-01 .single-box  .other-info .icon{
    padding-left: .25rem;
    color: #999;
    line-height: .25rem;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: .25rem;
}
.blog-content-01 .single-box  .other-info .icon:not(:last-child) {
    border-right: solid 1px #e5e7eb;
    margin-right: .1rem;
    padding-right: .1rem;
}
.blog-content-01 .single-box  .other-info .view{
    background-image: url(../image/view.svg);
}
.blog-content-01 .single-box  .other-info .comment{
    background-image: url(../image/comment.svg);
}

@media(min-width: 1201px) {
    .blog-content-01 .single-box .blog-01-more:hover a{
        margin-left: 0;
        background: #0281cc;
        color: #fff;
    }
    .blog-content-01 .single-box .blog-01-more:hover img{
        display: none;
    }
    .blog-content-01 .single-box .blog-01-more:hover img.hidden{
        display: block;
    }
}

@media (max-width: 1024px) {
    .blog-content-01 .single-item{
        width: 50%;
    }
    .blog-content-01 .single-item:nth-of-type(2n) ~ .single-item{
        margin-top: .3rem;
    }
}

@media (max-width: 640px) {
    .blog-content-01 .single-item{
        width: 100%;
    }
    .blog-content-01 .single-item:not(:first-child){
        margin-top: .3rem;
    }
}

/* one end */


/* Two */

.blog-content-02 .infomation{
    padding: .3rem;
}
.blog-content-02 .flex-list{
    margin: 0 -.15rem;
}
.blog-content-02 .single-item{
    width: 25%;
    padding: 0 .15rem;
}
.blog-content-02 .single-item:nth-of-type(4n) ~ .single-item{
    margin-top: .3rem;
}
.blog-content-02 .single-box{
    border-radius: .1rem;
    overflow: hidden;
    background-color: #f6f7f8;
}
.blog-content-02 .single-box .infomation h2{
    font-size: .14rem;
    color: #9ca3af;
    margin-bottom: .1rem;
}
.blog-content-02 .single-box .infomation h3{
    font-size: .2rem;
}
.blog-content-02 .single-box .description{
    margin: .15rem 0 .2rem;
    opacity: .8;
}
.blog-content-02 .single-box .blog-01-more {
    margin-bottom: .5rem;
}
.blog-content-02 .single-box .blog-01-more a{
    transition: all .5s ease;
    color: #0281cc;
    padding: .1rem .15rem;
    border-radius: .05rem;
}
.blog-content-02 .single-box .blog-01-more img{
    width: .18rem;
    margin-left: .1rem;
}
.blog-content-02 .single-box  .other-info .icon{
    padding-left: .25rem;
    color: #999;
    line-height: .25rem;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: .25rem;
}
.blog-content-02 .single-box  .other-info .icon:not(:last-child) {
    border-right: solid 1px #e5e7eb;
    margin-right: .1rem;
    padding-right: .1rem;
}
.blog-content-02 .single-box  .other-info .view{
    background-image: url(../image/view.svg);
}
.blog-content-02 .single-box  .other-info .comment{
    background-image: url(../image/comment.svg);
}

@media(min-width: 1201px) {
    .blog-content-02 .single-box .blog-01-more a:hover{
        background: #0281cc;
        color: #fff;
    }
    .blog-content-02 .single-box .blog-01-more a:hover  img{
        display: none;
    }
    .blog-content-02 .single-box .blog-01-more a:hover img.hidden{
        display: block;
    }
}

@media (max-width: 1024px) {
    .blog-content-02 .single-item{
        width: 50%;
    }
    .blog-content-02 .single-item:nth-of-type(2n) ~ .single-item{
        margin-top: .3rem;
    }
}

@media (max-width: 640px) {
    .blog-content-02 .single-item{
        width: 100%;
    }
    .blog-content-02 .single-item:not(:first-child){
        margin-top: .3rem;
    }
}

/* Two end */

/* BLOG end */